<template>
  <div class="wrapper-contion">
    <div class="wrapper"></div>
    <div class="wrapper-white">
      <div class="top-Title">物料管理策略</div>
      <span class="top-sub"
        >物料管理的对象主要是指物料、中间产品或半成品、<br />
        最终产品。具体来讲包括：原材料、机物料、辅料、<br />在制品、产成品。物料管理系统接收<br />来自生产执行层的物料请求，通过物料管理活动的执行，对生产执行层进行及时响应，生产执行层<br />再根据物料响应结果做进一步的生产执行决策。</span
      >

      <div class="swiper-container list-swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in TopArr" :key="index">
            <div class="wrapper-Top-swiper-item">
              <div v-for="(child, indexs) in TopArr[index]" :key="indexs">
                <div class="wrapper-Top-white">
                  <div class="wrapper-Top-white-url">
                    <van-image width="100%" height="100%" fit="cover" :src="child.url" />
                  </div>
                  <div class="wrapper-Top-white-txt">{{ child.txt }}</div>
                  <div class="wrapper-Top-white-line"></div>
                  <div class="wrapper-Top-white-sub">{{ child.sub }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <div class="wrapper-Two">
      <div class="top-Title top-Title-Two">基本功能</div>
      <span class="top-sub top-sub-Two">包括收料管理、仓储管理、发料管理三大功能。</span>
      <div scroll-x="true" style="width: 100%; overflow-x: auto">
        <div class="wrapper-Two-image div-item"></div>
      </div>
    </div>
    <div class="wrapper-three">
      <div class="top-Title top-Title-Two">具体功能</div>
      <span class="top-sub top-sub-function"
        >物料管理的对象主要是指物料、中间产品或半成品、<br />最终产品。具体来讲包括：原材料、机物料、辅料、<br />在制品、产成品。物料管理系统接收<br />来自生产执行层的物料请求，通过物料管理活动的执行，<br />对生产执行层进行及时响应，生产执行层<br />再根据物料响应结果做进一步的生产执行决策。</span
      >
     <div class="swiper-container num-swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide numSlide" v-for="(item, index) in functionArr" :key="index">
            <div class="function-swiper-item" >
              <div v-for="(child, indexs) in functionArr[index]" :key="indexs">
                <div class="function-white">
                  <div class="function-num">
                    <!-- width="100%"  fit="cover"  height="100%" -->
                    <van-image class="vanImage" :src="child.url" />
                  </div>
                  <div class="function-right">
                    <div class="function-title">{{child.txt}}</div>
                    <div class="function-sub">{{child.sub}}</div>
                  </div>
                </div>
            </div>
          </div>
        </div>
       
      </div>
       <div class="swiper-pagination"></div>
    </div> 
    
</div>
    <div class="wrapper-five">
      <div class="top-Title top-Title-five">价值与目标</div>
      <div class="wrapper-five-left">
        <div class="wrapper-five-left-url">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/be31f7e8dd453b228d72a20da2b52bd8.png"
          />
        </div>
        <div class="wrapper-five-left-txt">降成本</div>
        <span class="wrapper-five-left-sub"
          >减少介质成本；<br />降低人工负荷成本；<br />降低呆滞料损耗；<br />降低库容占用和成本。</span
        >
      </div>
      <div class="wrapper-five-midd">
        <div class="wrapper-five-left-url">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/a0ccf3fb75ed3c8c8628b1c8884dd288.png"
          />
        </div>
        <div class="wrapper-five-left-txt">增效率</div>
        <span class="wrapper-five-left-sub"
          >向导式作业指引，提高工作效率；<br />精准库位管理，提高仓库利用率；<br />严格策略管控，提升库存周转率；<br />物料来源可追溯，提升物流效率；<br />实时准确掌握仓库情况，<br />提升管理效率。</span
        >
      </div>
      <div class="wrapper-five-down">
        <div class="wrapper-five-left-url">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/92cc00617aa33d39b364f4faf813ac9c.png"
          />
        </div>
        <div class="wrapper-five-left-txt">可扩展</div>
        <span class="wrapper-five-left-sub"
          >可与ERP、MES等第三方系统无缝整合；<br />支持SMD智能货架，立体仓，AGV等集成。</span
        >
      </div>
      <div class="wrapper-five-left-icon">
        <van-image
          width="100%"
          height="100%"
          fit="cover"
          src="https://oss.cloudcpc.com/0ccaf9ec6fe236b59dcbaf7e1a5df99a.png"
        />
      </div>
      <div class="wrapper-five-right-icon">
        <van-image
          width="100%"
          height="100%"
          fit="cover"
          src="https://oss.cloudcpc.com/71a3f0f64faa345aa690e3e5f5afafd8.png"
        />
      </div>
    </div>
    <div class="wrapper-six">
      <div class="wrapper-six-Title">
        物料管理系统对企业所有库存物料、半成品库、在制品物料制定号编码规则，
        并对物料数据进行收集、派送分配和跟踪。通过物料及库存的全局可视化，
        整合企业资源，优化整个物料供应链网络，达到物流成本的节约。
      </div>
      <div class="wrapper-six-right">
        <van-image
          width="100%"
          height="100%"
          fit="cover"
          src="https://oss.cloudcpc.com/f802b97ca60c36df8eb930b803a8e4a7.png"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { WxShare } from '@/utils/share'
import { redirectUrl } from '@/utils/config'
import Swiper from 'swiper'

export default {
  data() {
    return {
      TopArr: [
        [
          {
            url: 'https://oss.cloudcpc.com/ec035231ecfb3bb7b30ca87dc0a5c654.png',
            txt: '条码管理',
            sub: '物料、库位条码化，移动端通过扫码作业'
          },
          {
            url: 'https://oss.cloudcpc.com/5de3a393027535fe8c9dda4ff28ced96.png',
            txt: '库位管理',
            sub: '提供库位化管理，实现库存可视化'
          },
          {
            url: 'https://oss.cloudcpc.com/495b6eb0311f3eb0bfbadcb54c6d36bb.png',
            txt: '策略管控',
            sub: '多种存取规则，收货发货路径指引'
          },
          {
            url: 'https://oss.cloudcpc.com/9fdcd873f45a3f37a3de9247da953053.png',
            txt: '动态盘点',
            sub: '智能盈亏计算，自动发现库存损益'
          }
        ],
        [
          {
            url: 'https://oss.cloudcpc.com/1fa105c3a1453c2396b0df1564d0635a.png',
            txt: '齐套分析',
            sub: '实时获取物料齐套情况，避免未齐套提前发料'
          },
          {
            url: 'https://oss.cloudcpc.com/616a832388573d9eabf775185f2e89d5.png',
            txt: '冻结管理',
            sub: '有效冻结可疑物料，防止质量隐患扩散'
          },
          {
            url: 'https://oss.cloudcpc.com/004d54beb3623f55ba9d9e0c74a6e71f.png',
            txt: '物料追溯',
            sub: '解决来源去向问题'
          },
          {
            url: 'https://oss.cloudcpc.com/394fc262978f3cf2849a44e2e75a0375.png',
            txt: '呆滞预警',
            sub: '呆滞超期物料颜色提示预警'
          }
        ],
        [
          {
            url: 'https://oss.cloudcpc.com/99d97a3e1a5d38999e16b66372a02236.png',
            txt: 'BI报表看板',
            sub: '看板及报表分析，多维度帮助管理决策'
          },
          {
            url: 'https://oss.cloudcpc.com/cf8b0c73a5f03b6daf2858606118b658.png',
            txt: '仓库可视化',
            sub: '可视化仓库建模，实现仓库透明化'
          }
        ]
      ],
      functionArr: [
        [
          {
            url: 'https://oss.cloudcpc.com/97f35e5c69233da988a7729d1180ab39.png',
            txt: '物料编码管理',
            sub: '物料编码的定义、规则及管理'
          },
          {
            url: 'https://oss.cloudcpc.com/9798b6f63a5c3d9c96f0649670f2fc4a.png',
            txt: '库房库位编码管理',
            sub: '库房库位编码的定义、规则及管理'
          },
          {
            url: 'https://oss.cloudcpc.com/7cae2d9db08b340d959a9f759431a49c.png',
            txt: '采购计划（采购订单）管理',
            sub: '根据不同企业不同管理模式，以及企 业本身信息化程度，进行开发取舍'
          },
          {
            url: 'https://oss.cloudcpc.com/92493d3b829d34e1a9f387969e12f022.png',
            txt: '原棉管理',
            sub: '原棉管理，采购计划、质量标准、进出库记 录，以及原棉的生产厂家、产地、批号、包 型、质量标识、色值、长度、马克隆值等'
          }
        ],
        [
          {
            url: 'https://oss.cloudcpc.com/856f529ed6373797bcc71d0bb0a015a3.png',
            txt: '入库管理',
            sub: '入库物料的品种、规格、数量、标准等，存放位置基本固定，物料标志（标签、条码等）清晰可辨'
          },
          {
            url: 'https://oss.cloudcpc.com/b6ed784287763444bf64cc9f894fead4.png',
            txt: '出库管理',
            sub: '按照生产计划、工序需求备料，按时准点足额发料'
          },
          {
            url: 'https://oss.cloudcpc.com/0693550c90ea3520b89acff6ccf7043a.png',
            txt: '物料跟踪管理',
            sub: '显示物料清单及物料状态（缺料、等待、到达、接收），并通过接收设备（PAD、RFID、读卡器、条码枪等）将物料信息及时反馈'
          },
          {
            url: 'https://oss.cloudcpc.com/047a66ec6d8333e8a9dd4dbf7eb87414.png',
            txt: '成品入库管理',
            sub: '成品通过检验后，开票入库'
          }
        ]
      ],
      slideIndex:1
    }
  },
  mounted() {
    // WxShare({
    //   title: '云上展',
    //   desc: '数字展馆一站式服务，文化、品牌、科技、展示、互动、营销多位一体，量身定制虚拟数字解决方案！',
    //   link: `${redirectUrl}${fullPath}`,
    //   imgUrl: 'https://www.2025.net/share.png'
    // })
    this.$nextTick(() => {
      var swiper = new Swiper('.list-swiper', {
        pagination: {
          el: '.swiper-pagination'
        }
      })

      var swiper = new Swiper('.num-swiper', {
        pagination: {
          el: '.swiper-pagination',
          watchSlidesProgress: true,
        },
        on: {
          progress: function (progress) {
            let slideI=0
            if (progress) {
              let slide = this.slides.eq(progress)
              slide.removeClass('activeFunWhite')
            }
            if(progress+1===this.slides.length){
              slideI=0
            }else{
              slideI=progress+1
              let slide = this.slides.eq(slideI)
              slide.addClass('activeFunWhite')
            }
          },
        }
      })
    })
  },

  methods: {}
}
</script>
<style lang="scss" scoped>
@import './index';
</style>


